<template>
	<view class="frame1">
		<u-navbar :is-back="true" title="已登录设备" :background="background">
		</u-navbar>
		
		<view class="allwrap">
		<view class="frame-content1">
			<view class="flexal" style="padding:42rpx 0rpx;" @click="show = !show">
				<image src="/static/index/computer1.png" class="icon"></image>
				<view class="text">Windows 已登录</view>
				<image src="/static/bottom.png" class="icon-right" :class="show? 'icon-right-active':''" ></image>
			</view>
			<view v-if="show">
			<view class="line"></view>
			<view style="width: 100%;padding: 31rpx 0rpx" class="flexcen">
				<view style="flex-direction: column;" class="flexcen">
						<image src="/static/index/file.png" class="img"></image>
						<text class="file-text">传文件</text>
				</view>
			</view>
			<view class="line"></view>
			<view style="width: 100%;padding: 31rpx 0rpx" class="flexcen">
				<text style="font-weight: 400;font-size: 26rpx;color: #6E6E6E;">退出登录</text>
			</view>
			</view>
		</view>
		</view>
		<!-- 电话提示滑动快 -->
		<movablearea1 :movaheight="movaheightAll" v-if="movableareaShow" @editMovaheightAll="editMovaheightAll" :movaTop="movaTopAll"></movablearea1>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show:false,
				background: {
						backgroundColor: 'rgba(255, 0, 0, 0)',
				},
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="less">
	.frame1{
		background: #F3F4F6 !important;
	}
	.frame-content1{
		// width: 686rpx;
		margin-top: 32rpx;
		padding: 0rpx 32rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
	}
	.icon{
		width: 33rpx;
		height: 30rpx;
		// background: #000000;
	}
	.text{
		margin-left: 32rpx;
		font-weight: 400;
		font-size: 30rpx;
		color: #000000;
		flex: 1;
	}
	.icon-right{
		width: 24rpx;
		height: 14rpx;
	}
	.line{
		width: 622rpx;
		height: 0rpx;
		border: 1rpx solid #707070;
		opacity: 0.17;
	}
	.img{
		width: 90rpx;
		height: 90rpx;
	}
	.file-text{
		margin-top: 10rpx;
		font-weight: 400;
		font-size: 24rpx;
		color: #366EF4;
	}
	.icon-right-active{
		transform: rotate(180deg); 
	}
</style>
